<template>
  <div class="banner">
    <div class="top">
      <div class="webOptions">
        <web-options></web-options>
      </div>
      <div class="search">
        <search-bar></search-bar>
      </div>
      <div class="profile">
        <profile-options></profile-options>
      </div>
    </div>
    <div class="bottom">
      <img src="@/assets/img/title.png" alt="">
    </div>
  </div>
</template>

<script>
  import WebOptions from "./WebOptions.vue"
  import SearchBar from "./Searchbar.vue"
  import ProfileOptions from "./ProfileOptions.vue"

  export default {
    name: "banner",
    components: {
      WebOptions,
      ProfileOptions,
      SearchBar
    }
  }
</script>

<style scoped>
  .banner{
    background-image: url("@/assets/img/banner.png");
    background-size: cover;
    height: 12vw;
    width: 100%;
  }
  .webOptions{
    flex: 0 0 40%;
  }
  .search{
    flex: 0 0 30%;
  }
  .profile{
    flex: 0 0 30%;
  }
  .top {
    display: flex;
  }
  .top div {
    align-items: center;
  }
  .bottom{
    margin-left: 0;
    margin-top: 0;
  }
</style>